<template>
    
    <div>
        <div style="margin-bottom:10px">

            <!-- <el-input class="editSearch"></el-input> -->
<!-- class="search-text" -->
            <el-autocomplete
                      placeholder="Ocean Wiki"
                      class="title-search"
                      v-model="input"
                      :fetch-suggestions="querySearch"
                      :trigger-on-focus="false"
                      @keyup.enter.native="findArticle"
                      clearable
                    ></el-autocomplete>
<!-- @keyup.enter.native='search(input)' -->
            
            <el-button type="primary" round @click="clear">清空</el-button>
            <el-button type="success" round @click="submit">提交</el-button>
            <el-button type="warning" icon="el-icon-refresh" :disabled='isRefreshing' circle @click="refresh"></el-button>
        </div>

        <mavon-editor
            v-model="article"
            style="height:500px"
        />

        
        

    </div>
    
<!-- :toolbarsFlag="false"
            :editable="false"
            :subfield="false"
            :defaultOpen="'preview'" -->
</template>

<script>
import request from "@/api/client.js"

export default {
    name: 'AdminEdit',
    data() {
        return {
            input: '',
            article: '',
            titles: [],
            isRefreshing: false
        }
    },

    mounted() {
        request.listArticleTitles().then(resp => {
            this.titles = resp.data.data.titles.map(
                (title) => {
                    return {
                        value: title
                    }
                }
            )
            
        })
    },

    methods: {

        listTitle() {
            request.listTitle().then(resp => {
                this.titles = resp.data.data.titles
            })
        },

        querySearch(queryString, cb) {
            var results = this.titles.filter(this.createFilter(queryString));
            // var results = this.restaurants;
            cb(results);
        },
        createFilter(queryString) {
            return (question) => {
                return (question.value.indexOf(queryString.toLowerCase()) == 0);
            };
        },

        findArticle() {
            request.findArticleByTitle(this.input).then(resp => {
                this.article = resp.data.data.article.content
            })
        },

        refresh() {
            this.isRefreshing = true
            request.listArticleTitles().then(resp => {
                this.titles = resp.data.data.titles.map(
                    (title) => {
                        return {
                            value: title
                        }
                    }
                )
                this.$message({
                    message: '刷新成功',
                    type: 'success',
                    duration: 1000
                });
                this.isRefreshing = false
            })

        },

        submit() {
            // TODO
            if(this.article == '') {
                this.$message({
                    message: '词条内容不可为空',
                    type: 'error',
                    duration: 1500
                })
                return;
            }

            let article = {
                title: this.input,
                content: this.article
            }
            request.uploadArticle(article).then(resp => {
                this.$message({
                    message: '上传完成',
                    type: 'success',
                    duration: 1000
                })
                this.clear()
            })
        },

        clear() {
            this.input = '';
            this.article = '';
        }

    }

}
</script>

<style>

.title-search {
    width: 50%;
    margin-right: 1rem;
    /* border-style: solid;
    border-width: 1px; */
}

.title-search .el-input {
  width: 100%;
}

.title-search .el-input__inner {
  /* width: 50%; */
  /* box-shadow: 0px 0px 10px rgba(0, 0, 0, .80); */
  margin-right:0px;
  box-shadow: none;
  /* border: none; */
  /* border-top-right-radius: 0px; */
  border-radius: 20px;
  /* border-top-left-radius: 20px; */
  /* border-bottom-left-radius: 20px; */
}

.editSearch {
    width: 50%;
    margin-right: 1rem;
}

.editSearch .el-input__inner {
    border-radius: 20px;
}

</style>